<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="3"><div class="centerTitle">管理层级</div></el-col>
        <el-col :span="2" :offset="18" :xl="{span: 2, offset: 19}">
          <el-button v-if="this.menuList.includes('levelBatchAdd')" type="primary" size="medium" @click="BatchAdd()">添加层级</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="centerTable">
        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" border row-key="web_id" :expand-row-keys="['A1']" :menuList="this.menuList">
          <el-table-column prop="title" label="名称" align="center">
            <template slot-scope="scope">
              <span v-if="scope.$index === 0">
                <el-input v-model="title" placeholder="请输入名称"></el-input>
              </span>
              <span v-else> {{scope.row.title}} </span>
            </template>
          </el-table-column>
          <el-table-column prop="level" label="层级" align="center"></el-table-column>
          <el-table-column prop="operation" label="操作" align="center">
            <template slot-scope="scope">
              <template v-if="scope.$index !==0">
                <el-button v-if="scope.row.level === '学校'" @click="examine('edit',scope.row)" type="text" size="small">编辑</el-button>
                <el-button v-if="scope.row.level === '学段' && scope.row.type === 1 && menuList.includes('levelEdit')" @click="examine('edit',scope.row)" type="text" size="small">编辑</el-button>
                <el-button v-if="scope.row.level === '年级' && scope.row.type === 1 && menuList.includes('levelEdit')" @click="examine('edit',scope.row)" type="text" size="small">编辑</el-button>
                <el-button v-if="scope.row.level === '班级' && menuList.includes('levelEdit')" @click="examine('edit',scope.row)" type="text" size="small">编辑</el-button>
                <el-button v-if="scope.row.level === '学校' && menuList.includes('levelAdd')" @click="examine('learningPeriod',scope.row)" type="text" size="small">添加学段</el-button>
                <el-button v-if="scope.row.level === '学段' && menuList.includes('levelAdd')" @click="examine('grade',scope.row)" type="text" size="small">添加年级</el-button>
                <el-button v-if="scope.row.level === '年级' && menuList.includes('levelAdd')" @click="examine('class',scope.row)" type="text" size="small">添加班级</el-button>
                <el-button v-if="menuList.includes('levelDispatch')" @click="examine('distribution',scope.row)" type="text" size="small">分发</el-button>
                <el-button v-if="scope.row.level !== '学校' && menuList.includes('levelDestroy')" @click="examine('del',scope.row)" type="text" size="small" class="dangerTextBtn">删除</el-button>
                <el-button v-if="scope.row.level === '学校' && menuList.includes('schoolReport')" @click="examine('archives')" type="text" size="small">学校档案</el-button>
              </template>
              <template v-else>
                <el-button type="primary" round size="mini" @click="examine('search',scope.row)">查询</el-button>
                <el-button type="text" @click="examine('remove',scope.row)">清除</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>
    <!-- 添加学段、添加年级、添加班级 -->
    <add-learningPeriod v-if="isAddLearningPeriod" :row="row" :isAddLearningPeriod="this.isAddLearningPeriod" @noAddLearningPeriod="noAddLearningPeriod"></add-learningPeriod>
    <add-grade v-if="isAddGrade" :isAddGrade="this.isAddGrade" :row="row" @noAddGrade="noAddGrade"></add-grade>
    <add-class v-if="isAddClass" :isAddClass="this.isAddClass" :row="row" @noAddClass="noAddClass"></add-class>
    <!-- 编辑学校、年级、班级 -->
    <edit-school v-if="isEditSchool" :isEditSchool="this.isEditSchool" :row="row" @noEditSchool="noEditSchool"></edit-school>
    <edit-learningPeriod v-if="isEditLearningPeriod" :isEditLearningPeriod="this.isEditLearningPeriod" :row="row" @noEditLearningPeriod="noEditLearningPeriod"></edit-learningPeriod>
    <edit-grade v-if="isEditGrade" :isEditGrade="this.isEditGrade" :row="row" @noEditGrade="noEditGrade"></edit-grade>
    <edit-class v-if="isEditClass" :isEditClass="this.isEditClass" :row="row" @noEditClass="noEditClass"></edit-class>
    <!-- 分发 -->
    <distribution v-if="isDistribution" :isDistribution="this.isDistribution" :distributionType="distributionType" :distributionType_range_object="distributionType_range_object" @noDistribution="noDistribution"></distribution>
    <!-- 批量添加 -->
    <batch-add  v-if="isBatchAdd" :isBatchAdd="this.isBatchAdd" :row="row" @noBatchAdd="noBatchAdd"></batch-add>
  </div>
</template>
<script>
import addLearningPeriod from './hierarchy/addLearningPeriod.vue'
import addGrade from './hierarchy/addGrade.vue'
import addClass from './hierarchy/addClass.vue'
import editSchool from './hierarchy/editSchool.vue'
import editLearningPeriod from './hierarchy/editLearningPeriod.vue'
import editGrade from './hierarchy/editGrade.vue'
import editClass from './hierarchy/editClass.vue'
import batchAdd from './hierarchy/batchAdd.vue'
import distribution from '@/components/distribution/distribution.vue'
import {APIHIERARCHY, APIDELLEARNINGPERIOD, APIDELGRADE, APIDELCLASS} from '@/common/api.js'
export default {
  components: {addLearningPeriod, addGrade, addClass, distribution, editSchool, editLearningPeriod, editGrade, editClass, batchAdd},
  data () {
    return {
      menuList: [],
      isAddLearningPeriod: false,
      isAddGrade: false,
      isAddClass: false,
      isDistribution: false,
      isEditSchool: false,
      isEditLearningPeriod: false,
      isEditGrade: false,
      isEditClass: false,
      isBatchAdd: false,
      distributionType: null,
      distributionType_range_object: null,
      row: {},
      title: '',
      seacherTab: {
        title: '',
        level: ''
      },
      tableData: []
    }
  },
  created () {
    this.menuList = sessionStorage.getItem('list')
    this.tableList()
  },
  methods: {
    examine (type, e) { // 操作按钮
      if (type === 'search') {
        this.tableList()
      } else if (type === 'remove') {
        this.title = ''
        this.tableList()
      } else if (type === 'learningPeriod') {
        this.AddLearningPeriod(e)
      } else if (type === 'grade') {
        this.AddGrade(e)
      } else if (type === 'class') {
        this.AddClass(e)
      } else if (type === 'distribution') {
        this.distribution(e)
      } else if (type === 'del') {
        this.delFn(e)
      } else if (type === 'edit') {
        this.editFn(e)
      } else if (type === 'archives') {
        this.$router.push({path: '/schoolarchives'})
      }
    },
    tableList () { // 表格
      APIHIERARCHY({
        title: this.title
      }).then((res) => {
        if (res.status === 1) {
          this.tableData = []
          this.tableData.push(this.seacherTab)
          res.data.forEach(element => {
            this.tableData.push(element)
          })
        } else {
          this.$message.error(res.msg)
          this.tableData = []
          this.tableData.push(this.seacherTab)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    AddLearningPeriod (e) { // 添加学段
      this.isAddLearningPeriod = true
      this.row = e
    },
    noAddLearningPeriod (type) {
      this.isAddLearningPeriod = false
      if (type === 1) {
        this.tableList()
      }
    },
    AddGrade (e) { // 添加年级
      this.isAddGrade = true
      this.row = e
    },
    noAddGrade (type) {
      this.isAddGrade = false
      if (type === 1) {
        this.tableList()
      }
    },
    AddClass (e) { // 添加班级
      this.isAddClass = true
      this.row = e
    },
    noAddClass (type) {
      this.isAddClass = false
      if (type === 1) {
        this.tableList()
      }
    },
    delFn (e) { // 删除
      if (e.level === '学段') {
        this.$confirm('此操作将永久删除该学段, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          APIDELLEARNINGPERIOD({
            section_id: e.id
          }).then((res) => {
            if (res.status === 1) {
              this.$message.success(res.msg)
              this.tableList()
            } else {
              this.$message.error(res.msg)
            }
          }).catch((err) => {
            this.$message.error(err.msg)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else if (e.level === '年级') {
        this.$confirm('此操作将永久删除该年级, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          APIDELGRADE({
            grade_id: e.id
          }).then((res) => {
            if (res.status === 1) {
              this.$message.success(res.msg)
              this.tableList()
            } else {
              this.$message.error(res.msg)
            }
          }).catch((err) => {
            this.$message.error(err.msg)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else if (e.level === '班级') {
        this.$confirm('此操作将永久删除该班级, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          APIDELCLASS({
            class_id: e.id
          }).then((res) => {
            if (res.status === 1) {
              this.$message.success(res.msg)
              this.tableList()
            } else {
              this.$message.error(res.msg)
            }
          }).catch((err) => {
            this.$message.error(err.msg)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    editFn (e) { // 编辑
      if (e.level === '学校') {
        this.editSchool(e)
      } else if (e.level === '学段') {
        this.editLearningPeriod(e)
      } else if (e.level === '年级') {
        this.editGrade(e)
      } else if (e.level === '班级') {
        this.editClass(e)
      }
    },
    editSchool (e) { // 编辑学校
      this.isEditSchool = true
      this.row = e
    },
    noEditSchool (type) {
      this.isEditSchool = false
      if (type === 1) {
        this.tableList()
      }
    },
    editLearningPeriod (e) { // 编辑学校
      this.isEditLearningPeriod = true
      this.row = e
    },
    noEditLearningPeriod (type) {
      this.isEditLearningPeriod = false
      if (type === 1) {
        this.tableList()
      }
    },
    editGrade (e) { // 编辑学段
      this.isEditGrade = true
      this.row = e
    },
    noEditGrade (type) {
      this.isEditGrade = false
      if (type === 1) {
        this.tableList()
      }
    },
    editClass (e) { // 编辑班级
      this.isEditClass = true
      this.row = e
    },
    noEditClass (type) {
      this.isEditClass = false
      if (type === 1) {
        this.tableList()
      }
    },
    BatchAdd () { // 批量添加
      this.isBatchAdd = true
      this.row = this.tableData[1]
    },
    noBatchAdd (type) {
      this.isBatchAdd = false
      if (type === 1) {
        this.tableList()
      }
    },
    distribution (e) { // 分发
      if (e.level === '学段') {
        this.distributionType = 2
      } else if (e.level === '学校') {
        this.distributionType = 1
      } else if (e.level === '年级') {
        this.distributionType = 3
      } else if (e.level === '班级') {
        this.distributionType = 4
      }
      this.distributionType_range_object = e.id
      this.isDistribution = true
    },
    noDistribution (type) {
      this.isDistribution = false
      // if (type === 1) {
      //   this.tableList()
      // }
    }
  }
}
</script>
<style lang="scss">
.el-table__row--level-1>td:nth-child(1)>.cell>span:nth-child(1){
  padding-left: 20px !important;
}
.el-table__row--level-2>td:nth-child(1)>.cell>span:nth-child(1){
  padding-left: 92px !important;
}
.el-table__row--level-3>td:nth-child(1)>.cell>span:nth-child(1){
  padding-left: 122px !important;
}
</style>
